import React, { useState, useEffect } from 'react'
import './index.scss'
import { View } from '@tarojs/components'
import { AtList, AtListItem, AtPagination, AtActivityIndicator, AtMessage } from 'taro-ui'
import { getTagDetailHistroyUp } from '../../../../api/index'
import Taro from '@tarojs/taro'

interface ListArrResType {
  OfficialVerifyDesc: string
  face: string
  name: string
  fans: number
  mid: number
}

export default (props) => {
  const { name } = props
  const [total, setTotal] = useState(0)
  const [current, setCurrent] = useState(1)
  const [loading, setloading] = useState(true)
  const [upInformationList, setUpInformationList] = useState<ListArrResType[]>(
    []
  )

  useEffect(() => {
    if (name) {
      ;(async () => {
        const {
          data: {
            data: { upList, upListTotal },
            errorCode,
            errorMessage
          }
        } = await getTagDetailHistroyUp({
          tagName: name,
          page: 1,
          pageSize: 10
        })
        if (!errorCode) {
          setUpInformationList(upList)
          if (upListTotal) {
            setTotal(upListTotal)
          }
        } else {
          Taro.atMessage({
            message: errorMessage + ',请充值',
            type: 'error'
          })
        }
        setloading(false)
      })()
    }
  }, [name])

  const tapToDetail = (id) => {
    Taro.navigateTo({
      url: `/package/personal/index?id=${id}`
    })
  }

  const setLists = () => {
    if (upInformationList.length !== 0)
      return upInformationList.map((item) => {
        return (
          <AtListItem
            title={item.name}
            arrow="right"
            thumb={item.face}
            note={item.OfficialVerifyDesc || '这个UP很懒,什么都没留下'}
            extraText={(item.fans / 10000).toFixed(1) + '万粉丝'}
            onClick={() => tapToDetail(item.mid)}
          />
        )
      })
  }

  const onPageChange = (data) => {
    let { current } = data
    setloading(true)
    setCurrent(current)
    // console.log(current)
    ;(async () => {
      ;(async () => {
        const {
          data: {
            data: { upList, upListTotal }
          }
        } = await getTagDetailHistroyUp({
          tagName: name,
          page: current,
          pageSize: 10
        })
        setUpInformationList(upList)
        if (upListTotal) {
          setTotal(upListTotal)
        }
        setloading(false)
      })()
    })()
  }
  return (
    <View className="at-list-wrap">
      {loading ? (
        <AtActivityIndicator mode="center"></AtActivityIndicator>
      ) : (
        <View>
          <AtList>{setLists()}</AtList>
          <AtPagination
            icon
            total={total}
            pageSize={10}
            current={current}
            onPageChange={onPageChange}
          ></AtPagination>
        </View>
      )}
    </View>
  )
}
